<template>
    <div class="article-item-page">
        <!-- 列表中单个文章项 -->
        <div class="article-item van-hairline--bottom" v-for="e in dataList" :key="e.art_id" @click="enter(e.art_id)">
            <p class="title van-multi-ellipsis--l2" :class="e.cover.type === 1 ? 'w66' : ''">
                {{ e.title }}
            </p>
            <img v-for="k in e.cover.images" :key="k" class="img" :src="k" alt="">
            <div class="info">
                <span>{{ e.aut_name }}</span>
                <span>{{ e.comm_count }}评论</span>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        dataList: Array
    },
    data () {
        return {
            isSingleIMG: false
        }
    },
    methods: {
        enter (id) {
            this.$router.push(`/detail/${ id }`)
        }
    }
}
</script>

<style scoped lang="less">
.article-item {
    padding: 15px 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .title {
        width: 100%;
        margin: 0 0 8px 0;
        line-height: 22px;
        font-size: 16px;
        color: #333333;
        max-height: 44px;

        &.w66 {
            width: 66%;
        }
    }

    .img {
        width: 112px;
        height: 74px;
        border-radius: 4px;
        margin-bottom: 8px;
    }

    .info {
        width: 100%;
        color: #A5A6AB;
        font-size: 12px;
        position: relative;

        span {
            margin-right: 12px;
        }

        .geek-icon {
            float: right;
            font-size: 14px;
        }
    }
}
</style>
